<template>
	<view class="main">
		<u-cell-group >
			<u-cell-item title="姓名" :value="RelationDetail.username" :border-bottom="false" :arrow="false"></u-cell-item>
			<u-cell-item title="身份证号" :value="RelationDetail.idCard" :border-bottom="false" :arrow="false"></u-cell-item>
			<u-cell-item title="性别" :value="RelationDetail.sex?'男':'女'" :border-bottom="false" :arrow="false"></u-cell-item>
			<u-cell-item title="出生日期" :value="RelationDetail.birthday" :border-bottom="false" :arrow="false"></u-cell-item>
			<u-cell-item title="手机号" :value="RelationDetail.mobile" :border-bottom="false" :arrow="false"></u-cell-item>
			<u-cell-item title="就诊卡号" :value="RelationDetail.visitCardNo" :border-bottom="false" :arrow="false"></u-cell-item>
			<view class="idCard">
				<view class="title">
					<view class="f_t">
						<text>电子健康卡</text>
					</view>
					<view class="handle_f">
						<text>点击右侧二维码放大</text>
					</view>
				</view>
				<view class="idImg">
					<image class="img" src="@/static/lllllllmmm.png" mode=""></image>
				</view>
			</view>
		</u-cell-group>
		<u-button @tap="show = true" :custom-style="buttonStyle" shape="circle" hover-class="none">删除患者</u-button>
		<u-modal v-model="show" @confirm="deleteRelationUser" title="警告" cancel-text="取消" :content="content" :mask-close-able="true" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import { API } from "@/config/myApi.js"
	export default {
		data() {
			return {
				RelationDetail:{},
				buttonStyle: {
					width: "690rpx",
					color: "#999",
					fontSize: "32rpx",
					border:"1px solid #F5F5F5",
					marginTop:"48rpx"
				},
				show: false,
				content: '您确定要删除这条数据吗？'
			}
		},
		onLoad(option){
			this.RelationDetail = JSON.parse(option.val) 
		},
		methods: {
			async deleteRelationUser(){
				const res = await API.deleteRelationUserAsync({ids:this.RelationDetail.id})
				if(res.code == 200){
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.main{
		margin: 18rpx 30rpx;
	}
	.idCard{
		padding: 26rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.f_t{
			margin-bottom: 10rpx;
		}		
		.handle_f{
			font-size: 24rpx;
			color: #909399;
		}
		.idImg{
			width: 180rpx;
			height: 180rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
